<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<script type="text/javascript" src="../js/easyui/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../js/easyui/js/jquery.easyui.min.js"></script>

	<script type="text/javascript">
		$(function(){

			$('#tt2').tree({
				 dnd: true, 
				checkbox: true,
				url: '../dept/treedept.json',
				onClick:function(node){
					//alert('you click '+node.text);
				},
			
				onDrop: function(targetNode, source, point){  				
					
				      var target= $("#tt2").tree('getNode',targetNode);
				      alert(source.id+source.text+" \n"+point+" \n"+target.text.toString()+target.id.toString());
				     
				      /* $.ajax({  
				           url: '...',  
				           type: 'post',  
				           dataType: 'json',  
				           data: {  
				               id: source.id,  
				               targetId: targetId,  
				               point: point  
				           }  
				       });  */
				   }  
			});
			
		});
		function reload(){
			$('#tt2').tree('reload');
		}
		function getChildNodes(){
			var node = $('#tt2').tree('getSelected');
			if (node){
				var children = $('#tt2').tree('getChildNodes', node.target);
				var s = '';
				for(var i=0; i<children.length; i++){
					s += children[i].text + ',';
				}
				alert(s);
			}
		}
		function getChecked(){
			var nodes = $('#tt2').tree('getChecked');
			var s = '';
			for(var i=0; i<nodes.length; i++){
				if (s != '') s += ',';
				s += nodes[i].text;
			}
			alert(s);
		}
		function getSelected(){
			var node = $('#tt2').tree('getSelected');
			//if(node.attributes!=null)
			alert(node.attributes.manager.userName);
		  // alert(node.attributes);
			alert(node.text+node.id);
		}
		function collapse(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('collapse',node.target);
		}
		function expand(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('expand',node.target);
		}
		function collapseAll(){
			$('#tt2').tree('collapseAll');
		}
		function expandAll(){
			$('#tt2').tree('expandAll');
		}
		function append(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('append',{
				parent: node.target,
				data:[{
					text:'new1',
					checked:true
				},{
					text:'new2',
					state:'closed',
					children:[{
						text:'subnew1'
					},{
						text:'subnew2'
					}]
				}]
			});
		}
		function remove(){
			var node = $('#tt2').tree('getSelected');
			$('#tt2').tree('remove', node.target);
		}
		function update(){
			var node = $('#tt2').tree('getSelected');
			if (node){
				node.text = '<span style="font-weight:bold">new text</span>';
				node.iconCls = 'icon-save';
				$('#tt2').tree('update', node);
			}
		}
		function isLeaf(){
			var node = $('#tt2').tree('getSelected');
			var b = $('#tt2').tree('isLeaf', node.target);
			alert(b)
		}
	</script>
</head>
<body>
<ul id="tt2">

<li>
			<span>Folder</span></li></ul>
<div style="float:right">

<ul id="tt"></ul>
</div>


<p>Create from JSON data</p>
	<div style="margin:10px;">
		<a href="#" onclick="reload()">reload</a>
		<a href="#" onclick="getChildNodes()">getChildNodes</a>
		<a href="#" onclick="getChecked()">getChecked</a>
		<a href="#" onclick="getSelected()">getSelected</a>
		<a href="#" onclick="collapse()">collapse</a>
		<a href="#" onclick="expand()">expand</a>
		<a href="#" onclick="collapseAll()">collapseAll</a>
		<a href="#" onclick="expandAll()">expandAll</a>
		<a href="#" onclick="append()">append</a>
		<a href="#" onclick="remove()">remove</a>
		<a href="#" onclick="update()">update</a>
		<a href="#" onclick="isLeaf()">isLeaf</a>
	</div>
	<div title="Clock" style="text-align:center;background:#ffffff;height:150px;padding:5px;">

					<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="100">

				      <param name="movie" value="http://www.respectsoft.com/onlineclock/analog.swf">

				      <param name=quality value=high>

				      <param name="wmode" value="transparent">

				      <embed src="http://www.respectsoft.com/onlineclock/analog.swf" width="100" height="100" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>

				    </object>

			    </div>
<script type="text/javascript" src="http://jc.revolvermaps.com/m.js"></script><script type="text/javascript">rmm_ki101('0',130,'226x4m1wcol','ff0000');</script>
	
</body>
</html>